
import React, { useRef } from 'react'
import * as echarts from 'echarts'
import { useEffect, useState } from 'react'

type EChartsOption = echarts.EChartsOption;


function YouShang() {
  const [Dry2Option, Dry2setOption] = useState({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      data: ['30K', '20~30', '15~20', '10~15', '10以下'],
    },

    series: [
      {
        name: 'Funnel',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: [
          { value: 60, name: '5%' },
          { value: 40, name: '7%' },
          { value: 20, name: '8%' },
          { value: 80, name: '10%' },
          { value: 100, name: '70%' }
        ]
      }
    ]
  })
  const chartRef = useRef(null);// 创建一个ref来存储DOM元素的引用 
  useEffect(() => {
    if (chartRef.current) { // 确保DOM元素已经被挂载
      var myChart = echarts.init(chartRef.current);// 使用current属性访问DOM元素
      myChart.setOption(Dry2Option)// 设置图表选项  
      // 窗口大小自适应
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      // 清除监听器  可写可不写
      return () => {
        window.removeEventListener('resize', () => myChart.resize());
        if (myChart) {
          myChart.dispose();
        }
      }
    }
  }, [Dry2Option])// 当options改变时,重新渲染图表
  return (
    <div ref={chartRef} style={{ width: '22vw', height: '40vh' }}></div>
  )
}

export default YouShang